<template>
  <div class="login-container">
    <div class="login-wrapper">
      <div class="login-banner">
        <div class="banner-text">
          <h1>欢迎来到乡村助农平台</h1>
          <p>探索乡村魅力，体验自然生活</p>
        </div>
      </div>
      <div class="login-box">
        <div class="login-tabs">
          <div
            :class="['tab-item', loginForm.userType === 1 ? 'active' : '']"
            @click="loginForm.userType = 1"
          >
            游客登录
          </div>
          <div
            :class="['tab-item', loginForm.userType === 2 ? 'active' : '']"
            @click="loginForm.userType = 2"
          >
            农户登录
          </div>
        </div>

        <div class="login-content">
          <div class="welcome-text">
            <h2>
              {{
                loginForm.userType === 1 ? "欢迎来到乡村助农平台" : "农户您好"
              }}
            </h2>
            <p>
              {{
                loginForm.userType === 1
                  ? "探索乡村魅力，体验自然生活"
                  : "让我们一起助力乡村振兴"
              }}
            </p>
          </div>
          <el-form
            :model="loginForm"
            :rules="loginRules"
            ref="loginFormRef"
            @submit.prevent="handleLogin"
          >
            <div class="form-section">
              <el-form-item prop="phone">
                <div class="form-label">手机号</div>
                <el-input
                  v-model="loginForm.phone"
                  placeholder="请输入手机号"
                  :prefix-icon="User"
                />
              </el-form-item>

              <el-form-item prop="password">
                <div class="form-label">密码</div>
                <el-input
                  v-model.trim="loginForm.password"
                  type="password"
                  placeholder="请输入密码"
                  show-password
                  :prefix-icon="Lock"
                />
              </el-form-item>
            </div>

            <div class="remember-row">
              <el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
              <a class="forget-pwd">忘记密码？</a>
            </div>

            <el-button type="primary" class="login-btn" @click="handleLogin">
              立即登录
            </el-button>
          </el-form>

          <div class="register-row">
            <span>还没有账号？</span>
            <el-link type="primary" @click="handleRegister">注册</el-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import type { FormInstance } from "element-plus";
import request from "@/utils/request";
import { setToken } from "@/utils/auth";
import { User, Lock } from "@element-plus/icons-vue";

const router = useRouter();
const loginFormRef = ref<FormInstance>();
const rememberPassword = ref(false);

const loginForm = ref({
  phone: "",
  password: "",
  userType: 1,
});

// 表单验证规则
const loginRules = {
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: "blur",
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度不能小于6位", trigger: "blur" },
  ],
};

const handleLogin = async () => {
  if (!loginFormRef.value) return;

  await loginFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const url =
          loginForm.value.userType === 1
            ? "/user/tourist/login"
            : "/user/rural/login";
        const res = await request({
          url,
          method: "post",
          data: {
            phone: loginForm.value.phone,
            password: loginForm.value.password,
            userType: loginForm.value.userType,
          },
        });

        if (res.success) {
          setToken(res.data);
          const targetPath =
            loginForm.value.userType === 1 ? "/tourist/home" : "/farmer/home";
          console.log("跳转路径:", targetPath);
          await router.push(targetPath);
          ElMessage.success("登录成功");
        } else {
          ElMessage.error(res.message || "登录失败");
        }
      } catch (error) {
        console.error("登录失败:", error);
        ElMessage.error("登录失败");
      }
    }
  });
};

const handleRegister = () => {
  router.push("/register");
  console.log("跳转到注册页面");
};
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  background: linear-gradient(135deg, #f0f7e6 0%, #e8f5e9 50%, #f1f8e9 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../assets/images/pattern.png") repeat;
    opacity: 0.03;
    pointer-events: none;
    animation: patternMove 20s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at 20% 20%,
        rgba(139, 195, 74, 0.1) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 80% 80%,
        rgba(139, 195, 74, 0.1) 0%,
        transparent 50%
      );
    pointer-events: none;
  }

  .decoration {
    position: absolute;
    pointer-events: none;

    &.leaf-1 {
      top: 10%;
      left: 5%;
      width: 100px;
      height: 100px;
      background: url("../assets/images/leaf1.png") no-repeat center center;
      background-size: contain;
      opacity: 0.1;
      animation: float 6s ease-in-out infinite;
    }

    &.leaf-2 {
      top: 20%;
      right: 5%;
      width: 80px;
      height: 80px;
      background: url("../assets/images/leaf2.png") no-repeat center center;
      background-size: contain;
      opacity: 0.1;
      animation: float 8s ease-in-out infinite;
    }

    &.leaf-3 {
      bottom: 15%;
      left: 15%;
      width: 60px;
      height: 60px;
      background: url("../assets/images/leaf3.png") no-repeat center center;
      background-size: contain;
      opacity: 0.1;
      animation: float 7s ease-in-out infinite;
    }
  }
}

@keyframes patternMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

.login-wrapper {
  display: flex;
  width: 900px;
  height: 600px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  animation: fadeIn 0.5s ease-out;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(
      180deg,
      rgba(139, 195, 74, 0.03) 0%,
      rgba(139, 195, 74, 0) 100%
    );
    pointer-events: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-banner {
  flex: 1;
  background: url("../assets/images/rural-bg.jpg") no-repeat center center;
  background-size: cover;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(1px);
  }

  .banner-text {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: #fff;
    z-index: 1;

    h1 {
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 10px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    p {
      font-size: 16px;
      opacity: 0.9;
      max-width: 300px;
      line-height: 1.6;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
  }
}

.login-box {
  width: 420px;
  background: #fff;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.login-tabs {
  display: flex;
  padding: 4px;
  background: #f5f7fa;

  .tab-item {
    flex: 1;
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 2px;
    font-weight: 500;

    &.active {
      background: #8bc34a;
      color: white;
      box-shadow: 0 2px 8px rgba(139, 195, 74, 0.3);
    }

    &:not(.active) {
      color: #606266;
      &:hover {
        background: rgba(139, 195, 74, 0.1);
      }
    }
  }
}

.login-content {
  padding: 35px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 54px); // 减去tabs的高度

  .welcome-text {
    text-align: center;
    margin-bottom: 20px;

    h2 {
      font-size: 24px;
      color: #2c3e50;
      margin-bottom: 4px;
      font-weight: 600;
    }

    p {
      font-size: 14px;
      color: #909399;
      margin: 0;
    }
  }

  .form-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 0;
  }

  :deep(.el-input) {
    --el-input-hover-border-color: #8bc34a;
    --el-input-focus-border-color: #8bc34a;

    .el-input__wrapper {
      box-shadow: 0 0 0 1px #dcdfe6 inset;
      border-radius: 8px;
      padding: 0 15px;
      height: 42px;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 0 0 1px #8bc34a inset;
      }

      &.is-focus {
        box-shadow: 0 0 0 1px #8bc34a inset;
      }
    }
  }

  .el-form-item {
    margin-bottom: 24px;
  }

  .remember-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;

    :deep(.el-checkbox) {
      .el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #8bc34a;
        border-color: #8bc34a;
      }

      .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #8bc34a;
      }
    }

    .forget-pwd {
      color: #8bc34a;
      font-size: 14px;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        color: #7cb342;
        text-decoration: underline;
      }
    }
  }

  .login-btn {
    width: 100%;
    height: 44px;
    background: #8bc34a;
    border-color: #8bc34a;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-bottom: 24px;

    &:hover {
      background: #7cb342;
      border-color: #7cb342;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(139, 195, 74, 0.3);
    }

    &:active {
      transform: translateY(0);
    }
  }

  .register-row {
    text-align: center;
    font-size: 14px;
    color: #606266;
    padding: 16px 0;
    border-top: 1px solid #f0f0f0;

    .el-link {
      margin-left: 5px;
      font-size: 14px;
      font-weight: 500;
      color: #8bc34a;

      &:hover {
        color: #7cb342;
      }
    }
  }
}

.form-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
  font-weight: 500;
}

.el-form-item {
  margin-bottom: 24px;

  :deep(.el-input) {
    .el-input__wrapper {
      padding-left: 12px;

      .el-input__prefix {
        font-size: 16px;
        color: #909399;
      }
    }
  }
}
</style> 